//这是main.js 是我们项目的JS入口文件


//导入jQuery
//import ***  from *** 是ES6中导入模式
//由于ES6的语法太高级啦，浏览器解析不了。所以会报错
import $ from 'jquery'
// const $ = require('jquery')  在node写的模式
  
//npm i jquery -S  //安装jquery
// cnpm i bootstrap@3.3.7 -S  //安装bootstrap
//npm init -y //下载json文件
// cnpm i url-loader -D  //安装图片的url
// html-webpack-plugin  安装HTML到内存的插件
//cnpm i //表示把json里的包全部下载一下

//使用import语法，导入css样式表
import './css/index.css'
import './css/index.less'  //cnpm i less-loader -D ,cnpm i less -D
import './css/index.scss'  //cnpm i sass-loader -D ,cnpm i node-sass -D
import 'bootstrap/dist/css/bootstrap.css'  //可以直接写包名  cnpm i file-loader -D 字体
//注意：webpack 默认只能打包处理JS类型文件，无法处理其他的非js类型文件
//如果要处理非Js类型的文件，我们需要手动安装一些合适第三方loader 加载器;
// 1.如果想要打包处理css文件，需要安装cnpm i style-loader css-loader -D 
// 2.打开webpack . config.js 这个配置文件，在里面，新增一个配置节点,叫做module，他是一个对象
//在这个module对象中，有个rules属性，这个rules属性是个数组；这个数组中存放了所有第三方的匹配和处理规则


//注意: webpack 处理第三方文件类型的过程:
// 1.发现这个要处理的文件不是JS文件,然后就去配置文件中,查找有没有对应的第三方loader规则
// 2.如果能找到对应的规则，就会调用对应的loader 处理这种文件类型;
// 3.在调用1oader的时候，是从后往前调用的;
// 4.当最后的一个loader 调用完毕,会把处理的结果,直接交给webpack进行打包合并，最终输出到bundle.js中去


// /class关键字 是ES6中提供的新语法
class Person {
	// static 关键字，可以定义静态属性
	static info ={ name:'zs',age:20}
}
console.log(Person.info)

//在webpack 中,默认只能处理一部分ES6的新语法,一些更高级的Es6语法或者ES7 语法，webpack是处理不了的;这时候,就需要借助于第三方的loader，来帮助webpack处理这些高级的语法，当第三方loader把高级语法转为低级的语法之后，会把结果交给webpack 去打包到bundle . js中
//通过Babel 1可以帮我们将高级的语法转换为低级的语法
//在webpack 中,可以运行如下两套命令，安装两套包,去安装Babel 相关的1oader功能:
//	webpack4x版本：
	//第1套包：cnpm i babel-loader@7 babel-core babel-plugin-transform-runtime -D(千万记得是babel-loader@7，不是其他的)
	//cnpm i -D babel-loader @babel/core @babel/plugin-transform-runtime webpack
	//第2套包：cnpm i babel-preset-env babel-preset-stage-0 -D(注意是-零，不是字母o)
//  webpack3x版本：
//第一套包: cnpm i babel-core babel-loader babel-plugin-transform-runtime -D   cnpm i -D babel-loader @babel/core @babel/plugin-transform-runtime webpack
// 1.2第二套包: cnpm i babel-preset-env babel-preset-stage-0 -D  cnpm i -D @babel/preset-env @babel/preset-stage-0 
// 2.打开webpack 的配置文件,在module 节点下的rules 数组中,添加一个新的匹配规则:
// 2.1 { test:/\.js$/ , use: 'babel-loader'，exclude : /node_ modules/ }
// 2.2注意:在配置babel 的loade x规则的时候,必须把node modules 目录，通过exclude选项排除掉:原因有俩:
// 2.2.1如果不排除node modules，则Babel会把node modules 中所有的第三方JS文f牛，都打包编译,这样,会非常消耗CPU ,同时，打包速度非常慢;
// 2.2.2 哪怕,最终, Babel 把所有node_ modules 中的Js转换完毕了,但是,项目也无法正常运行!
// 3.在项目的根目录中,新建一个叫做. babelre 的Babel配文件，这个配置文件，属于JSON格式，所以，在写.babelrc配置的时候，必须符合JSON语法规范，不能写注释，字符串必须用双引号
// 3.1 在 .babelrc写如下配置：
			// {
			// 	"presets":["env","stage-0"],
			// 	"plugins":["transform-runtime"],
			// 	}



$(function(){
	$('li:odd').css('backgroundColor','red')
	$('li:even').css('backgroundColor',function(){
		return '#' + 'D97634'
	})
})


//webpack 能够处理JS文件的相互依赖关系，能够处理JS的兼容问题，把高级的、浏览器不能别的语法，转为低级的浏览器能正常识别的语法
// webpack ./src/main.js -o ./dist/bundle.js --mode=development  需要在终端输入打包

//添加一个配置文件webpack.config.js 后就直接webpack 进行

//使用webpack-dev-server这个工具，来实现自动打包编译功能
//cnpm i webpack-dev-server -D  安装到项目的本地开发环境
//1.因为webpack-dev-server是本地安装，所以不能使用脚本命令,只有全局才能运行
//2.webpack-dev-server这个工具，如果想要正常运行，要求在本地目录中必须安装webpack
//3.webpack-dev-server 帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘中，而是，直接托管到了电脑的内存中，所以，我们在项目的根目录中找不到这个大好的包bundle.js
//4.我们认为，webpack-dev-server把打好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到他，但是，可以认为
//和dist src  node_modules是一个级别

//"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" 需要在json文件scripts中添加
//其中 --open代表页面自动打开，--port 3000代表改端口号 --contentBase src代表自动打开src下的文件
//并且每一次修改都需要执行 npm run dev